<!DOCTYPE html>
<html lang="zh-cn" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admin.css">
<script src="js/jquery.js"></script>
<script src="js/pintuer.js"></script>
<script src="/js/vuejs-2.5.16.js"></script>
<script src="/js/axios-0.18.0.js"></script>
</head>
<body>
<div class="panel admin-panel" id="bannerDiv">
  <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>增加轮播数据</strong></div>
  <div class="body-content">
    <form  class="form-x">
      <input type="hidden" name="id" v-model="banner.id">

      <div class="form-group">
        <div class="label">
          <label>标题：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" v-model="banner.title" name="title"  disabled/>
          <div class="tips"></div>
        </div>
      </div>
      <div class="clear"></div>


      <div class="form-group">
        <div class="label">
          <label>URL链接：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" v-model="banner.url" name="url"  disabled/>
          <div class="tips"></div>
        </div>
      </div>
      <div class="clear"></div>


      <!--<div class="form-group">
        <div class="label">
          <label>图片：</label>
        </div>
        <div class="field">
          <input type="file"   name="img" class="input tips" style="width:25%; float:left;"    data-toggle="hover" data-place="right"/>
          <div class="tipss">图片尺寸：1300*500</div>
        </div>
      </div>
      <div class="clear"></div>-->


      <div class="form-group" v-if="banner.picPath">
        <div class="label">
          <label>图片：</label>
        </div>
        <div class="field">
          <img v-bind:src="banner.picPath" alt="" width="300" height="100" />
        </div>
      </div>
      <div class="clear"></div>



      <div class="form-group">
        <div class="label">
          <label>描述：</label>
        </div>
        <div class="field">
          <textarea name="contentDesc"  class="input" style="height:150px; border:1px solid #ddd;" v-model="banner.contentDesc" disabled></textarea>
          <div class="tips"></div>
        </div>
      </div>

      <div class="clear"></div>


      <div class="form-group">
        <div class="label">
          <label>排序：</label>
        </div>
        <div class="field">
          <input type="number" class="input w50" name="orderNo"    v-model="banner.orderNo" data-validate="number:排序必须为数字" disabled/>
          <div class="tips"></div>

        </div>
      </div>

      <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
          <a class="button bg-main icon-check-square-o" type="submit" @click="back()"> 返回</a>
        </div>
      </div>
    </form>
  </div>
</div>
<script type="text/javascript">
    const app = new Vue({
        el:'#bannerDiv',
        data:{
            banner:{}
        },
        methods:{
          //图片上传
          uploadFile() {
              let formData = new window.FormData();
              formData.append('uploadFile', document.querySelector('input[type=file]').files[0]);
              let options = {  // 设置axios的参数
                  url: "/file/upload",//访问地址
                  data: formData,
                  method: 'post',
                  headers: {
                      'Content-Type': 'multipart/form-data'
                  }
              };
              axios(options).then(resp => {
                  if (resp.data.code == 1) {
                      this.banner.picPath = resp.data.data;//将图片访问地址记录到movies对象
                  }else{
                    alert(resp.data.msg);
                  }
              })
          },
          back(){
            //history.go(-1);
            location.href="banner_list.html";
          },
          findById(id){
            axios.get("/banner/"+id).then(resp=>{
              if (resp.data.code == 1){
                this.banner=resp.data.data;
              }else{
                alert(resp.data.msg);
              }
            });
          }
		},
        created(){
            let id = location.search.split("=")[1];

            if(id){
              this.findById(id);
            }
        }
    })
</script>
<script src="/js/verify.js"></script>
</body>
</html>